<template>
  <div class="content">
    <el-container class="content">
      <el-header class="headers">
        <el-form :inline="true">
          <el-row>
            <el-col :span="21">
              <el-form-item :label="$t('webAuto.applicant')" style="width: 200px">
                <el-input v-model="data.proposer"/>
              </el-form-item>
              <el-form-item :label="$t('webAuto.RequestNo')" style="width: 200px">
                <el-input v-model="data.oddNumber"/>
              </el-form-item>
              <el-form-item label="单据类型">
                <el-select v-model="data.leixin" :placeholder="$t('webAuto.PleaseSelect')" style="width:150px"
                           @change="changeLeixin">
                  <el-option label="费用应付" value="YFD02_SYS"/>
                  <el-option label="标准应付" value="YFD01_SYS"/>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('webAuto.ApprovalStatus')">
                <el-select v-model="data.status" :placeholder="$t('webAuto.PleaseSelect')" style="width:150px">
                  <el-option :label="$t('webAuto.inProgress')" value="RUNNING"/>
                  <el-option :label="$t('webAuto.ApprovalRejected')" value="REFUSE"/>
                  <el-option :label="$t('webAuto.Approved')" value="PASS"/>
                  <el-option :label="$t('webAuto.ApprovalRevocation')" value="CANCEL"/>
                  <el-option :label="$t('webAuto.InvalidApproval')" value="CANCELLATION"/>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('webAuto.date')">
                <el-date-picker style="width:240px" v-model="data.period" type="daterange"
                                :range-separator="$t('webAuto.to')" :start-placeholder="$t('webAuto.start')"
                                :end-placeholder="$t('webAuto.end')"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item style="width: 200px;">
                <el-button type="primary" @click="onSubmit" style="width: 50px;height: 30px;">
                  {{ $t('calendar.search') }}
                </el-button>
                <el-button type="info" @click="onRest" style="width: 50px;">
                  {{ $t('calendar.rest') }}
                </el-button>
                <el-button type="warning" @click="exportExcel" style="width: 50px;">
                  {{ $t('webAuto.export') }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-main class="tableList">
        <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                  v-if="data.leixin == 'YFD02_SYS'"
                  style="height:95%;width:100%"
                  :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column fixed="right" :label="$t('webAuto.operate')" width="100">
            <template #default="scope">
              <el-button type="warning" text bg size="small" @click="showProcess(scope.row)">{{
                  $t('webAuto.ViewForm')
                }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="processDefName" :label="$t('webAuto.processName')" width="150"/>
          <el-table-column prop="businessKey" :label="$t('webAuto.ProcessNumber')" width="170"/>
          <el-table-column prop="perosoname" :label="$t('webAuto.ProcessApplicant')" width="130"/>
          <el-table-column prop="status" :label="$t('webAuto.ProcessStatus')" width="120">
            <template #default="scope">
              <el-tag v-if="scope.row.status == '审批进行中'" type="primary">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批通过'" type="success">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被驳回'" type="warning">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被撤销'" type="info">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被作废'" type="danger">{{ scope.row.status }}</el-tag>
              <el-tag v-else>{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" :label="$t('webAuto.LCstartTime')" width="180"/>
          <el-table-column prop="finishTime" :label="$t('webAuto.LCendTime')" width="180"/>

          <el-table-column prop="fieldDanJuLX" label="单据类型" width="200"/>
          <el-table-column prop="fieldWangLaiDW" label="供应商" width="200"/>
          <el-table-column prop="fieldZhangQi" label="业务日期" width="200"/>
          <el-table-column prop="fieldDaoQiR" label="到期日" width="200"/>
          <el-table-column prop="fieldBiBie" label="币别" width="120"/>
          <el-table-column prop="fieldJieSuanFS" label="结算方式" width="120"/>
          <el-table-column prop="fieldShiFouTL" label="是否退料" width="120"/>
          <el-table-column prop="fieldPEBusinessKey" label="入库单号" show-overflow-tooltip width="200"/>
<!--          <el-table-column prop="fieldFeiYongXMMC" label="单据行" width="200"/>-->
          <el-table-column prop="fieldZGYFFYXMMC" label="费用项目" width="200"/>
          <el-table-column prop="fieldZGBuHanShuiJE" label="不含税金额" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldZGBuHanShuiJE }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldZGJiaShuiHJ" label="价税合计" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldZGJiaShuiHJ }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldZGJSHJBWB" label="价税合计本位币" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldZGJSHJBWB }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe v-else
                  style="height:95%;width:100%"
                  :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column fixed="right" :label="$t('webAuto.operate')" width="100">
            <template #default="scope">
              <el-button type="warning" text bg size="small" @click="showProcess(scope.row)">{{
                  $t('webAuto.ViewForm')
                }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="processDefName" :label="$t('webAuto.processName')" width="150"/>
          <el-table-column prop="businessKey" :label="$t('webAuto.ProcessNumber')" width="170"/>
          <el-table-column prop="perosoname" :label="$t('webAuto.ProcessApplicant')" width="130"/>
          <el-table-column prop="status" :label="$t('webAuto.ProcessStatus')" width="120">
            <template #default="scope">
              <el-tag v-if="scope.row.status == '审批进行中'" type="primary">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批通过'" type="success">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被驳回'" type="warning">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被撤销'" type="info">{{ scope.row.status }}</el-tag>
              <el-tag v-else-if="scope.row.status == '审批被作废'" type="danger">{{ scope.row.status }}</el-tag>
              <el-tag v-else>{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" :label="$t('webAuto.LCstartTime')" width="180"/>
          <el-table-column prop="finishTime" :label="$t('webAuto.LCendTime')" width="180"/>
          <el-table-column prop="fieldDanJuLX" label="单据类型" width="200"/>
          <el-table-column prop="fieldWangLaiDW" label="供应商" width="200"/>
          <el-table-column prop="fieldZhangQi" label="业务日期" width="200"/>
          <el-table-column prop="fieldDaoQiR" label="到期日" width="200"/>
          <el-table-column prop="fieldXianDaoPiao" label="是否先到票" width="120"/>
          <el-table-column prop="fieldShiFouTL" label="是否退料" width="120"/>
          <el-table-column prop="fieldYuanDanBH" label="单据编号" width="150"/>
<!--          <el-table-column prop="fieldbillNo" label="单据行" width="150"/>-->
          <el-table-column prop="fieldRuKuSJ" label="入库时间" width="120"/>
          <el-table-column prop="fieldmaterialName" label="物料名称" width="150"/>
          <el-table-column prop="fieldmaterialCode" label="物料编码" width="150"/>
          <el-table-column prop="fieldtaxRate" label="税率" width="120"/>
          <el-table-column prop="fieldtaxAmount" label="税额" width="150"/>
          <el-table-column prop="fieldpriceQty" label="计价数量" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:100px">
                {{ scope.row.fieldpriceQty }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldprice" label="单价" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldprice }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldexcludingTaxAmount" label="不含税金额" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldexcludingTaxAmount }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldamountIncludingTax" label="价税合计" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldamountIncludingTax }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fieldYingFuJSHJBWB" label="价税合计本位币" width="150">
            <template #default="scope">
              <el-tag type="success" style="width:80px">
                {{ scope.row.fieldYingFuJSHJBWB }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination :currentPage="data.currentPage" :page-size="data.pageSize"
                         :page-sizes="[20, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
                         layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                         @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
        <el-dialog direction="rtl" :title="$t('webAuto.ProcessDetails')" v-model="data.processVisible" closeFree
                   style="height: auto;min-height:100%;;width: 100%;margin:0!important;" :close-on-click-modal="false"
                   :close-on-press-escape="false">
          <instance-preview v-if="data.processVisible" :instance-id="data.selectInstance.instanceId"
                            @handler-after="handlerAfter"></instance-preview>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import report, {
  MFInventoryEstimatedPayableReport, ExportMFInventoryEstimatedPayableReport
} from '@/api/report.js'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import InstancePreview from "@/views/workspace/approval/ProcessInstancePreview2.vue";
import {dateListEnd, dateListStart} from "@/views/report/data.js";
import {useI18n} from 'vue-i18n';


const {t} = useI18n();
components: {
  InstancePreview
}
const data = reactive({
  proposer: '',
  oddNumber: '',
  status: '',
  period: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  tablesList: [],
  processVisible: false,
  selectInstance: {},
  leixin: 'YFD02_SYS',
})

// 表格绑定的默认样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 页面显示加载
onMounted(() => {
  let a = dateListEnd()
  let b = dateListStart(a)
  data.period = [b, a]
  tableList()
})

// 分页
const handleSizeChange = (val) => {
  data.pageSize = val
  tableList()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  tableList()
}

const changeLeixin = (val) => {
  data.currentPage = 1
  data.pageSize = 10
  tableList()
}

const tableList = () => {
  let start = ''
  let end = ''
  if (data.period.length > 0) {
    start = data.period[0]
    end = data.period[1]
  }
  let map = {
    fieldDanJuLX: data.leixin //默认查询标准应付
  }
  if (data.contractName) {
    map.fieldaccountsPayableDetails = data.contractName //入库单号
  }
  report.MFInventoryEstimatedPayableReport({
    pageSize: data.pageSize,
    pageNo: data.currentPage,
    startTime: start,
    endTime: end,
    userName: data.proposer,
    businessKey: data.oddNumber,
    businessStatus: data.status,
    map
  }).then(res => {
    data.tablesList = res.data.records
    data.total = res.data.total
  }).catch(err => {
    console.log(err)
    ElMessage.error(err.response.data)
  })
}

// 查询
const onSubmit = () => {
  data.currentPage = 1
  tableList()
}
// 重置
const onRest = () => {
  data.proposer = ''
  data.oddNumber = ''
  data.status = ''
  data.period = []
  data.contractName = ''
  data.currentPage = 1
  tableList()
}
// 导出
const exportExcel = () => {
  let start = ''
  let end = ''
  if (data.period.length > 0) {
    start = data.period[0]
    end = data.period[1]
  }
  let map = {
    fieldDanJuLX: data.leixin //默认查询标准应付
  }
  if (data.contractName) {
    map.fieldaccountsPayableDetails = data.contractName //入库单号
  }
  ElMessageBox.confirm(t('webAuto.exportCurrentData'), t('webAuto.prompt'), {
    confirmButtonText: t('webAuto.sure'),
    cancelButtonText: t('webAuto.cancel'),
    type: 'warning'
  }).then(() => {
    report.ExportMFInventoryEstimatedPayableReport({
      pageSize: data.pageSize,
      pageNo: data.currentPage,
      startTime: start,
      endTime: end,
      userName: data.proposer,
      businessKey: data.oddNumber,
      businessStatus: data.status,
      map
    }).then(res => {
      const blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=UTF-8'});
      const fileName = "MF存货暂估应付.xlsx"
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement("a")
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    })
  }).catch(() => {
    ElMessage.info(t('webAuto.CancelExport'))
  })
}

//查看表格里面的表单
const showProcess = (row) => {
  data.processVisible = true
  data.selectInstance = row
}

const handlerAfter = () => {
  data.processVisible = false
  // this.getIdoList()
}
</script>

<style scoped lang="less">
@import url('../index.less');
</style>